<template>
	<!-- <div class="A-previewDialog"> -->
	<vue-drag-resize-rotate
		v-if="show"
		:rotatable="true"
		:parent="true"
		dragHandle=".board-btn"
		@resizing="resizing"
		@resizestop="resizestop"
		@dragstop="dragstop"
		v-bind="config"
		:z="config.z"
		:data-type="initFile.type"
		v-on="on">
		<div
			class="A-previewDialog-content"
			@mouseleave="mouseleave"
			@mousemove="mousemoveEvent">
			<transition name="fade">
				<i class="el-icon-close" @click="closed" v-if="showClose"></i>
			</transition>
			<transition name="fade">
				<i
					class="el-icon-arrow-left"
					@click="prev"
					v-show="showHandler"></i>
			</transition>
			<transition name="fade">
				<i
					class="el-icon-arrow-right"
					@click="next"
					v-show="showHandler"></i>
			</transition>
			<div class="board">
				<div class="board-btn"></div>
			</div>
			<div class="A-previewDialog-content_preview">
				<template v-if="state === 'error'">
					<el-empty>
						<template #image>
							<svg
								t="1715577383128"
								class="icon"
								viewBox="0 0 1706 1024"
								version="1.1"
								xmlns="http://www.w3.org/2000/svg"
								p-id="1685"
								width="200"
								height="200">
								<path
									d="M683.9808 114.670933l-26.2144-83.012266 40.686933-12.834134 26.2144 82.9952zM626.2784 189.4912l-60.8256-62.2592 30.532267-29.815467 60.808533 62.2592zM575.317333 268.458667l-100.9152-17.3056 7.202134-42.052267 100.932266 17.3056zM1030.826667 46.08l-232.106667 356.693333 192.853333-22.186666-97.28 174.08 61.44 68.266666-174.08 247.466667 218.453334-237.226667-75.093334-73.386666 177.493334-223.573334-170.666667 5.12zM677.546667 542.72c-5.12-8.533333-17.066667-10.24-27.306667-5.12l-52.906667 32.426667c-10.24 5.12-10.24 17.066667-5.12 27.306666 6.826667 8.533333 18.773333 10.24 27.306667 5.12l52.906667-32.426666c10.24-5.12 10.24-17.066667 5.12-27.306667zM706.56 624.64c-5.12-8.533333-17.066667-10.24-27.306667-5.12l-52.906666 32.426667c-10.24 5.12-10.24 17.066667-5.12 27.306666 6.826667 8.533333 18.773333 10.24 27.306666 5.12l52.906667-32.426666c10.24-5.12 10.24-17.066667 5.12-27.306667z"
									p-id="1686"></path>
								<path
									d="M562.144589 704.772105a18.773333 20.48 59.979 1 0 35.464891-20.493 18.773333 20.48 59.979 1 0-35.464891 20.493Z"
									p-id="1687"></path>
								<path
									d="M557.486929 616.922847a18.773333 20.48 60 1 0-35.472401 20.48 18.773333 20.48 60 1 0 35.472401-20.48Z"
									p-id="1688"></path>
								<path
									d="M566.613333 779.946667l-157.013333-271.36c-5.12-8.533333-1.706667-22.186667 6.826667-27.306667l238.933333-138.24c10.24-5.12 22.186667-1.706667 27.306667 6.826667l25.6 22.186666v-54.613333c-10.24-18.773333-35.84-27.306667-54.613334-15.36l-273.066666 157.013333c-18.773333 10.24-25.6 34.133333-15.36 52.906667l175.786666 305.493333c10.24 18.773333 34.133333 25.6 52.906667 13.653334l109.226667-63.146667v-42.666667l-107.52 61.44c-11.946667 5.12-23.893333 1.706667-29.013334-6.826666z"
									p-id="1689"></path>
								<path
									d="M783.36 278.186667m-27.306667 0a27.306667 27.306667 0 1 0 54.613334 0 27.306667 27.306667 0 1 0-54.613334 0Z"
									p-id="1690"></path>
								<path
									d="M783.36 508.586667m-27.306667 0a27.306667 27.306667 0 1 0 54.613334 0 27.306667 27.306667 0 1 0-54.613334 0Z"
									p-id="1691"></path>
								<path
									d="M778.24 727.04m-27.306667 0a27.306667 27.306667 0 1 0 54.613334 0 27.306667 27.306667 0 1 0-54.613334 0Z"
									p-id="1692"></path>
								<path
									d="M1201.493333 570.026667l52.906667 32.426666c8.533333 5.12 20.48 3.413333 27.306667-5.12 5.12-10.24 5.12-22.186667-5.12-27.306666l-52.906667-32.426667c-10.24-5.12-22.186667-3.413333-27.306667 5.12-6.826667 10.24-5.12 22.186667 5.12 27.306667zM1172.48 651.946667l52.906667 32.426666c8.533333 5.12 20.48 3.413333 27.306666-5.12 5.12-10.24 5.12-22.186667-5.12-27.306666l-52.906666-32.426667c-10.24-5.12-22.186667-3.413333-27.306667 5.12-6.826667 8.533333-5.12 20.48 5.12 27.306667z"
									p-id="1693"></path>
								<path
									d="M1284.189619 710.574226a20.48 18.773333 30.021 1 0 18.78525-32.509484 20.48 18.773333 30.021 1 0-18.78525 32.509484Z"
									p-id="1694"></path>
								<path
									d="M1342.588937 610.600483a20.48 18.773333 30 1 0-18.773334 32.516367 20.48 18.773333 30 1 0 18.773334-32.516367Z"
									p-id="1695"></path>
								<path
									d="M1254.4 467.626667l52.906667 32.426666c8.533333 5.12 20.48 3.413333 27.306666-5.12 5.12-10.24 5.12-22.186667-5.12-27.306666l-52.906666-32.426667c-10.24-5.12-22.186667-3.413333-27.306667 5.12-5.12 8.533333-5.12 20.48 5.12 27.306667z"
									p-id="1696"></path>
								<path
									d="M1395.711103 507.627809a20.48 18.773333 30 1 0-18.773333 32.516367 20.48 18.773333 30 1 0 18.773333-32.516367Z"
									p-id="1697"></path>
								<path
									d="M1278.293333 785.066667l-116.053333-66.56v40.96l117.76 69.973333c18.773333 11.946667 42.666667 5.12 52.906667-13.653333l175.786666-305.493334c10.24-18.773333 3.413333-42.666667-15.36-52.906666l-273.066666-157.013334c-18.773333-11.946667-44.373333-3.413333-54.613334 15.36v56.32l25.6-23.893333c5.12-8.533333 17.066667-11.946667 27.306667-6.826667l238.933333 138.24c8.533333 5.12 11.946667 18.773333 6.826667 27.306667l-157.013333 271.36c-5.12 8.533333-17.066667 11.946667-29.013334 6.826667z"
									p-id="1698"></path>
							</svg>
						</template>
						<template #description class="tip">
							解析失败了！
						</template>
					</el-empty>
				</template>
				<template v-else-if="currentFile.type === 'img'">
					<PreviewImg
						ref="preview"
						v-bind="config"
						:url="currentFile.url"
						:on="on"
						@unmount="unmount"
						@rendered="rendered"
						@error="error"
						container=".A-previewDialog-content_preview"></PreviewImg>
				</template>
				<template v-else-if="currentFile.type === 'docx'">
					<PreviewDocx
						ref="vueOffice"
						:src="currentFile.url"
						style="height: 100%"
						@rendered="rendered"
						@error="error"></PreviewDocx>
				</template>
				<template v-else-if="currentFile.type === 'xlsx'">
					<PreviewXlsx
						ref="previewXlsx"
						:src="currentFile.url"
						:options="xlsxOptions"
						@rendered="rendered"
						@error="error"></PreviewXlsx>
				</template>
				<template v-else-if="currentFile.type === 'pdf'">
					<PreviewPdf
						:src="currentFile.url"
						@rendered="rendered"
						@error="error"></PreviewPdf>
				</template>
				<template v-else-if="currentFile.type === 'txt'">
					<PreviewTxt
						:src="currentFile.url"
						:on="on"
						@rendered="rendered"
						@error="error"></PreviewTxt>
				</template>
				<template v-else-if="currentFile.type === 'other'">
					<el-empty>
						<template #image>
							<svg
								t="1715577383128"
								class="icon"
								viewBox="0 0 1706 1024"
								version="1.1"
								xmlns="http://www.w3.org/2000/svg"
								p-id="1685"
								width="200"
								height="200">
								<path
									d="M683.9808 114.670933l-26.2144-83.012266 40.686933-12.834134 26.2144 82.9952zM626.2784 189.4912l-60.8256-62.2592 30.532267-29.815467 60.808533 62.2592zM575.317333 268.458667l-100.9152-17.3056 7.202134-42.052267 100.932266 17.3056zM1030.826667 46.08l-232.106667 356.693333 192.853333-22.186666-97.28 174.08 61.44 68.266666-174.08 247.466667 218.453334-237.226667-75.093334-73.386666 177.493334-223.573334-170.666667 5.12zM677.546667 542.72c-5.12-8.533333-17.066667-10.24-27.306667-5.12l-52.906667 32.426667c-10.24 5.12-10.24 17.066667-5.12 27.306666 6.826667 8.533333 18.773333 10.24 27.306667 5.12l52.906667-32.426666c10.24-5.12 10.24-17.066667 5.12-27.306667zM706.56 624.64c-5.12-8.533333-17.066667-10.24-27.306667-5.12l-52.906666 32.426667c-10.24 5.12-10.24 17.066667-5.12 27.306666 6.826667 8.533333 18.773333 10.24 27.306666 5.12l52.906667-32.426666c10.24-5.12 10.24-17.066667 5.12-27.306667z"
									p-id="1686"></path>
								<path
									d="M562.144589 704.772105a18.773333 20.48 59.979 1 0 35.464891-20.493 18.773333 20.48 59.979 1 0-35.464891 20.493Z"
									p-id="1687"></path>
								<path
									d="M557.486929 616.922847a18.773333 20.48 60 1 0-35.472401 20.48 18.773333 20.48 60 1 0 35.472401-20.48Z"
									p-id="1688"></path>
								<path
									d="M566.613333 779.946667l-157.013333-271.36c-5.12-8.533333-1.706667-22.186667 6.826667-27.306667l238.933333-138.24c10.24-5.12 22.186667-1.706667 27.306667 6.826667l25.6 22.186666v-54.613333c-10.24-18.773333-35.84-27.306667-54.613334-15.36l-273.066666 157.013333c-18.773333 10.24-25.6 34.133333-15.36 52.906667l175.786666 305.493333c10.24 18.773333 34.133333 25.6 52.906667 13.653334l109.226667-63.146667v-42.666667l-107.52 61.44c-11.946667 5.12-23.893333 1.706667-29.013334-6.826666z"
									p-id="1689"></path>
								<path
									d="M783.36 278.186667m-27.306667 0a27.306667 27.306667 0 1 0 54.613334 0 27.306667 27.306667 0 1 0-54.613334 0Z"
									p-id="1690"></path>
								<path
									d="M783.36 508.586667m-27.306667 0a27.306667 27.306667 0 1 0 54.613334 0 27.306667 27.306667 0 1 0-54.613334 0Z"
									p-id="1691"></path>
								<path
									d="M778.24 727.04m-27.306667 0a27.306667 27.306667 0 1 0 54.613334 0 27.306667 27.306667 0 1 0-54.613334 0Z"
									p-id="1692"></path>
								<path
									d="M1201.493333 570.026667l52.906667 32.426666c8.533333 5.12 20.48 3.413333 27.306667-5.12 5.12-10.24 5.12-22.186667-5.12-27.306666l-52.906667-32.426667c-10.24-5.12-22.186667-3.413333-27.306667 5.12-6.826667 10.24-5.12 22.186667 5.12 27.306667zM1172.48 651.946667l52.906667 32.426666c8.533333 5.12 20.48 3.413333 27.306666-5.12 5.12-10.24 5.12-22.186667-5.12-27.306666l-52.906666-32.426667c-10.24-5.12-22.186667-3.413333-27.306667 5.12-6.826667 8.533333-5.12 20.48 5.12 27.306667z"
									p-id="1693"></path>
								<path
									d="M1284.189619 710.574226a20.48 18.773333 30.021 1 0 18.78525-32.509484 20.48 18.773333 30.021 1 0-18.78525 32.509484Z"
									p-id="1694"></path>
								<path
									d="M1342.588937 610.600483a20.48 18.773333 30 1 0-18.773334 32.516367 20.48 18.773333 30 1 0 18.773334-32.516367Z"
									p-id="1695"></path>
								<path
									d="M1254.4 467.626667l52.906667 32.426666c8.533333 5.12 20.48 3.413333 27.306666-5.12 5.12-10.24 5.12-22.186667-5.12-27.306666l-52.906666-32.426667c-10.24-5.12-22.186667-3.413333-27.306667 5.12-5.12 8.533333-5.12 20.48 5.12 27.306667z"
									p-id="1696"></path>
								<path
									d="M1395.711103 507.627809a20.48 18.773333 30 1 0-18.773333 32.516367 20.48 18.773333 30 1 0 18.773333-32.516367Z"
									p-id="1697"></path>
								<path
									d="M1278.293333 785.066667l-116.053333-66.56v40.96l117.76 69.973333c18.773333 11.946667 42.666667 5.12 52.906667-13.653333l175.786666-305.493334c10.24-18.773333 3.413333-42.666667-15.36-52.906666l-273.066666-157.013334c-18.773333-11.946667-44.373333-3.413333-54.613334 15.36v56.32l25.6-23.893333c5.12-8.533333 17.066667-11.946667 27.306667-6.826667l238.933333 138.24c8.533333 5.12 11.946667 18.773333 6.826667 27.306667l-157.013333 271.36c-5.12 8.533333-17.066667 11.946667-29.013334 6.826667z"
									p-id="1698"></path>
							</svg>
						</template>
						<template #description class="tip">
							暂时不支持的文件格式！
							<!-- <br /> -->
							<!-- <TooltipDiv :content="currentFile.url"></TooltipDiv> -->
						</template>
					</el-empty>
				</template>
			</div>
		</div>
	</vue-drag-resize-rotate>
	<!-- </div> -->
</template>

<script>
	// vue-drag-resize 文档地址：https://github.com/kirillmurashov/vue-drag-resize#readme
	// vue-drag-resize-rotate 文档地址：https://gausszhou.github.io/vue-drag-resize-rotate/#/parent/parent-basic-case
	import VueDragResizeRotate from '@gausszhou/vue-drag-resize-rotate';
	import PreviewImg from './preview_img.vue';
	import PreviewTxt from './preview_txt.vue';
	import PreviewDocx from './preview_docx.vue';
	import PreviewXlsx from './preview_xlsx.vue';
	import PreviewPdf from './preview_pdf.vue';
	import TooltipDiv from '../A-form/tooltipDiv/index.vue';
	//引入相关样式
	import '@vue-office/docx/lib/index.css';

	export default {
		name: 'previewDialogContent',
		components: {
			VueDragResizeRotate,
			PreviewImg,
			PreviewTxt,
			PreviewXlsx,
			TooltipDiv,
			PreviewDocx,
			PreviewPdf,
		},
		data() {
			return {
				show: false,
				url: '',
				on: {},
				config: {
					x: 0,
					y: 0,
					z: 0,
				},
				showClose: false,
				closeLine: 100, // 距离顶部最少多少距离展示关闭按钮
				showHandler: false,
				handlerLine: 100, // 距离两边最少多少距离展示下一张按钮
				repeatGap: 50, // 多个同类型框偏移的初始距离，为了防止折叠
				saftGap: 100, // 最少不能距离视图边缘多少距离（安全边框）
				ract: {},
				imgTypesList: [
					'apng',
					'avif',
					'gif',
					'jpg',
					'jpeg',
					'jfif',
					'pjpeg',
					'pjp',
					'png',
					'svg',
					'webp',
				],
				docxTypesList: ['docx', 'doc'],
				pdfTypesList: ['pdf'],
				xlsxTypesList: ['xlsx', 'xls'],
				txtTypesList: ['txt'],
				index: 0,
				key: 0,
				state: 'beforeLoad',
			};
		},
		computed: {
			files() {
				let urls = [],
					files = [];
				if (typeof this.url == 'string') {
					urls = this.url.split(',').filter(e => !!e);
				}
				if (Array.isArray(this.url)) {
					urls = this.url;
				}
				urls.map(item => {
					if (typeof item == 'string') {
						files.push({
							url: item,
							type: this.getFileType(item),
							ext: this.getFileExt(item),
						});
					}
					if (
						Object.prototype.toString.call(item) ==
						'[object Object]'
					) {
						files.push({
							url: item.url,
							type: item.type ?? this.getFileType(item),
							ext: this.getFileExt(item),
						});
					}
				});

				return files;
			},
			currentFile() {
				return this.files[this.index];
			},
			initFile() {
				return this.files[0];
			},
			xlsxOptions() {
				return {
					xls:
						this.currentFile.ext?.toLowerCase() === 'xls'
							? true
							: false, //预览xlsx文件设为false；预览xls文件设为true
					minColLength: 0, // excel最少渲染多少列，如果想实现xlsx文件内容有几列，就渲染几列，可以将此值设置为0.
					minRowLength: 0, // excel最少渲染多少行，如果想实现根据xlsx实际函数渲染，可以将此值设置为0.
					widthOffset: 10, //如果渲染出来的结果感觉单元格宽度不够，可以在默认渲染的列表宽度上再加 Npx宽
					heightOffset: 10, //在默认渲染的列表高度上再加 Npx高
					beforeTransformData: workbookData => {
						if (Reflect.has(this.on, 'beforeTransformData')) {
							return (
								this.on?.beforeTransformData?.(
									this.currentFile,
								) ?? workbookData
							);
						}

						return workbookData;
					}, //底层通过exceljs获取excel文件内容，通过该钩子函数，可以对获取的excel文件内容进行修改，比如某个单元格的数据显示不正确，可以在此自行修改每个单元格的value值。
					transformData: workbookData => {
						if (Reflect.has(this.on, 'transformData')) {
							return (
								this.on?.transformData?.(this.currentFile) ??
								workbookData
							);
						}
						return workbookData;
					}, //将获取到的excel数据进行处理之后且渲染到页面之前，可通过transformData对即将渲染的数据及样式进行修改，此时每个单元格的text值就是即将渲染到页面上的内容
				};
			},
			mousemoveEvent() {
				return this._.throttle(this.mousemove, 100, {
					trailing: false,
				});
			},
		},
		created() {
			document.body.style.overflow = 'hidden';
		},
		mounted() {
			this.initRact();
			let { x, y, w, h } = this.config;
			this.setRact({ x, y, w, h });
			this.setPrevRact();
			this.$nextTick(() => {
				this.show = true;
			});
		},
		methods: {
			unmount() {},
			initRact() {
				// 历史记录检测
				this.bcakDetection();
				// 重叠检测
				this.elevationDetection();
				// 边界检测(一定要放到最后，拿去最终的xy)
				this.borderDetection();
			},
			// 历史记录检测
			bcakDetection() {
				let oldConfigStr = localStorage.getItem(
					'VueDragResizeRotateConfig',
				);
				let oldConfigJSON = {};
				if (oldConfigStr) {
					oldConfigJSON = JSON.parse(oldConfigStr) ?? {};
					this.config = Object.assign(
						this.config,
						oldConfigJSON?.[this.currentFile.type],
					);
					this.ract = Object.assign(this.ract, oldConfigJSON);
				}
			},
			// 边界检测
			borderDetection() {
				let x = this.config.x,
					y = this.config.y;
				if (x >= this.config.availWidth - this.saftGap) {
					x = this.saftGap;
				}
				if (y >= this.config.availHeight - this.saftGap) {
					y = this.saftGap;
				}
				this.config.x = x;
				this.config.y = y;
				return { x, y };
			},
			// 重叠检测
			elevationDetection() {
				let x = this.config.x,
					y = this.config.y,
					z = 2147483;
				let vdrs = Array.from(document.querySelectorAll('.vdr'));
				let lastSameTypeVdr = vdrs?.find(
					el => el.dataset.type === this.initFile.type,
				);
				if (lastSameTypeVdr) {
					x = this.config.x + this.repeatGap;
					y = this.config.y + this.repeatGap;
				}
				let lastVdr = vdrs?.[0];
				if (lastVdr) {
					let lastVdrZ = Number(getComputedStyle(lastVdr).zIndex);
					z = isNaN(lastVdrZ + 1) ? z : lastVdrZ + 1;
				}
				this.config.x = x;
				this.config.y = y;
				this.config.z = z;
				return { x, y, z };
			},
			prev() {
				this.state = 'beforeLoad';
				let { x, y, w, h } = this.getRact();
				this.index--;
				if (this.index < 0) {
					this.index = this.files.length - 1;
				}
				this.setRact({ x, y, w, h });
			},
			next() {
				this.state = 'beforeLoad';
				let { x, y, w, h } = this.getRact();
				this.index++;
				if (this.index >= this.files.length) {
					this.index = 0;
				}
				this.setRact({ x, y, w, h });
			},
			mouseleave(e) {
				this.showClose = false;
				this.showHandler = false;
			},
			mousemove(e) {
				let { pageX, pageY } = e;
				let isInBox =
					pageX >= this.ract?.[this.currentFile.type].x &&
					pageX <=
						this.ract?.[this.currentFile.type].x +
							this.ract?.[this.currentFile.type].w &&
					pageY >= this.ract?.[this.currentFile.type].y &&
					pageY <=
						this.ract?.[this.currentFile.type].y +
							this.ract?.[this.currentFile.type].h;
				if (!isInBox) {
					this.mouseleave();
					return;
				}

				// 处理关闭按钮
				let closeLine = Math.max(
					this.closeLine,
					isNaN(this.ract?.[this.currentFile.type].h * 0.1)
						? 0
						: this.ract?.[this.currentFile.type].h * 0.1,
				);

				if (pageY < this.ract?.[this.currentFile.type].y + closeLine) {
					this.showClose = true;
				} else {
					this.showClose = false;
				}
				if (this.files.length > 1) {
					// 处理上一张，下一张
					let handlerLine = this.handlerLine;
					if (
						pageX <
							this.ract?.[this.currentFile.type].x +
								handlerLine ||
						pageX >
							this.ract?.[this.currentFile.type].x +
								this.ract?.[this.currentFile.type].w -
								handlerLine
					) {
						this.showHandler = true;
					} else {
						this.showHandler = false;
					}
				}
			},
			getFileType(fileName) {
				const fileNameSplit = fileName.split('.');
				const fileExt =
					fileNameSplit[fileNameSplit.length - 1].toLowerCase();
				let type = 'other';
				if (this.imgTypesList.includes(fileExt)) {
					type = 'img';
				}
				if (this.docxTypesList.includes(fileExt)) {
					type = 'docx';
				}
				if (this.pdfTypesList.includes(fileExt)) {
					type = 'pdf';
				}
				if (this.xlsxTypesList.includes(fileExt)) {
					type = 'xlsx';
				}
				if (this.txtTypesList.includes(fileExt)) {
					type = 'txt';
				}
				return type;
			},
			getFileExt(fileName) {
				const fileNameSplit = fileName.split('.');
				const fileExt =
					fileNameSplit[fileNameSplit.length - 1].toLowerCase();
				return fileExt;
			},
			resizestop(x, y, w, h) {
				this.$refs.previewXlsx?.resize?.();
				this.setPrevRact();
			},
			resizing(x, y, w, h) {
				this.setRact({ x, y, w, h });
				this.$refs.preview?.resize({ x, y, w, h });

				this.on?.[this.currentFile.type]?.resize?.(x, y, w, h);
			},
			dragstop(x, y) {
				this.setRact({ x, y });
				this.setPrevRact();
			},
			setRact(ract) {
				this.ract[this.currentFile.type] ??= {};
				Object.keys(ract).forEach(key => {
					if (ract[key] !== undefined) {
						this.ract[this.currentFile.type][key] = ract[key];
					}
				});
			},
			getRact() {
				return this.ract[this.currentFile.type] ?? {};
			},
			setPrevRact() {
				localStorage.setItem(
					'VueDragResizeRotateConfig',
					JSON.stringify(this.ract),
				);
			},
			rendered() {
				this.state = 'rendered';
				this.on?.[this.currentFile.type]?.rendered?.(this.currentFile);
			},
			error() {
				this.state = 'error';
				this.on?.[this.currentFile.type]?.error?.(this.currentFile);
			},
			closed() {
				this.on?.closed?.();
				this.show = false;
			},
		},
	};
</script>

<style lang="scss" scoped>
	.A-previewDialog {
		// position: fixed;
		// right: 0;
		// bottom: 0;
	}

	.A-previewDialog-content {
		--safeline: 20px;
		height: 100%;
		width: 100%;
		position: relative;
		transform: translateX(0);
		box-sizing: border-box;
		position: relative;
		.el-icon-close {
			position: absolute;
			top: 30px;
			left: 50%;
			transform: translateX(-50%);
			font-size: 22px;
			line-height: 40px;
			cursor: pointer;

			border-radius: 100%;
			background-color: #fff;
			width: 40px;
			height: 40px;
			text-align: center;
			z-index: 50002;
		}
		.el-icon-arrow-left,
		.el-icon-arrow-right {
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			font-size: 22px;
			line-height: 40px;
			cursor: pointer;

			border-radius: 100%;
			background-color: #fff;
			width: 40px;
			height: 40px;
			text-align: center;
			z-index: 50002;
		}
		.el-icon-arrow-left {
			left: 30px;
		}
		.el-icon-arrow-right {
			right: 30px;
		}
		.board {
			position: relative;
			left: 4px;
			top: 4px;
			height: calc(100% - 8px);
			width: calc(100% - 8px);
			z-index: 49999;
			box-sizing: border-box;
			.board-btn {
				border-radius: 8px;
				opacity: 0;
				cursor: grab;
				user-select: none;
				text-align: center;
				height: 100%;
				width: 100%;
				line-height: 40px;
				color: #000;
				transition: all 0.4s;
				position: relative;
				overflow: hidden;
				clip-path: polygon(
					0% 0%,
					0% 100%,
					var(--safeline) 100%,
					var(--safeline) var(--safeline),
					calc(100% - var(--safeline)) var(--safeline),
					calc(100% - var(--safeline)) calc(100% - var(--safeline)),
					var(--safeline) calc(100% - var(--safeline)),
					var(--safeline) 100%,
					100% 100%,
					100% 0%
				);
			}
			.board-btn::after {
				position: absolute;
				left: 50%;
				top: 50%;
				content: '';
				height: 1000%;
				width: 1000%;
				border: 1px solid #000;
				background-image: linear-gradient(
					to right,
					transparent 5px,
					#e6a23c 5px,
					#e6a23c 15px,
					transparent 15px
				);
				background-size: 20px 100%;
				background-repeat: repeat-x;
				transform: translate(-50%, -50%) rotate(45deg);
				transform-origin: center;
			}

			.board-btn:hover {
				opacity: 1;
			}
			// .el-icon-close:hover {
			// 	opacity: 1;
			// }
		}
		.board:hover {
			.board-btn {
				opacity: 1;
			}
		}
		.A-previewDialog-content_preview {
			width: calc(100% - var(--safeline) * 2 - 30px);
			height: calc(100% - var(--safeline) * 2 - 30px);
			position: absolute;
			left: 50%;
			top: 50%;
			overflow: auto;
			transform: translate(-50%, -50%);
			z-index: 50000;
		}
	}
	// .A-previewDialog-content:hover {
	// 	.el-icon-close {
	// 		opacity: 1;
	// 	}
	// }
	// .A-vue-drag-resize-rotate {
	// 	position: absolute;
	// 	top: 0;
	// }
	::v-deep .el-empty__description {
		width: calc(100% - 50px);
		color: #5e6d82;
		font-size: 14px;
	}
	.fade-move {
		transition: all 0.5s ease;
	}
	.fade-enter,
	.fade-leave-to {
		opacity: 0;
	}
	// ::v-deep .vue-office-excel-main {
	// 	height: 100%;
	// 	.x-spreadsheet {
	// 		height: 100%;
	// 		.x-spreadsheet-sheet {
	// 			height: 100%;
	// 			width: 100% !important;
	// 		}
	// 	}
	// }
	::v-deep .docx {
		width: 100% !important;
	}
	::v-deep .el-empty {
		height: 100%;
	}
</style>
